<script setup>
import { useCounterStore } from '../stores/counter'
import { storeToRefs } from 'pinia'
import Pinialogo from '../components/Pinialogo.vue'

const counter = useCounterStore()
// 使用storeToRefs保持响应式
const { count, name, doubleCount } = storeToRefs(counter)
</script>

<template>
  <div>
    <Pinialogo class="pinialogo"/>
    <h1>{{ name }}</h1>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="counter.increment()">+</button>
    <button @click="counter.decrement()">-</button>
    <button @click="counter.incrementAsync()">Async +</button>
    <input v-model="counter.name" />
  </div>
</template>

<style scoped>
.pinialogo {
  width: 200px;
  height: 200px;
}  
</style>